<template>
  <div>
      <div class="kow_">
  <el-dialog
  title="添加用户"
  :visible.sync="add_btn"
:before-close="centerClose" @close="centerClose" 
  width="60%"
  center>
    
    <el-form :model="zxc" :rules="rules" ref="zxc" label-width="100px" class="demo-ruleForm">
<div class="fgh">
  <input v-model="zxc.orderindex">
</div>
       <div class="block">
    <span class="demonstration">入职时间</span>
    <el-date-picker
      v-model="zxc.entrydate"
      type="datetime"
      value-format="yyyy-MM-dd H:mm:ss"
      placeholder="选择日期时间">
    </el-date-picker>
  </div>

  <div class="name_from fl">
  <el-form-item label="姓名" prop="username">
    <el-input v-model="zxc.username"></el-input>
  </el-form-item>
</div> 


<div class="fl">
  <el-form-item label="地址" prop="hometel">
    <el-input v-model="zxc.hometel"></el-input>
  </el-form-item>
</div>

<div class="fl">
  <el-form-item label="用户工号" prop="userid">
    <el-input  v-model="zxc.userid"></el-input>
  </el-form-item>
</div>

<div class="fl">
  <el-form-item label="手机号码" prop="mobile">
    <el-input v-model="zxc.mobile"></el-input>
  </el-form-item>
</div>


<div class="fl">
  <el-form-item label="是否管理者" prop="ismanager">
    <el-select v-model="zxc.ismanager" placeholder="是否管理者">
      <el-option label="是" value="1"></el-option>
      <el-option label="否" value="0"></el-option>
    </el-select>
  </el-form-item>
  </div>

  <div class="fl">
  <el-form-item label="在职状态" prop="	workstate">
    <el-select v-model="zxc.workstate" placeholder="是否">
      <el-option label="是" value="1"></el-option>
      <el-option label="否" value="0"></el-option>
    </el-select>
  </el-form-item>
  </div>

 <div  class="qc_"></div>

  <el-form-item label="是否启用" prop="disenable">
    <el-switch v-model="zxc.disenable"></el-switch>
  </el-form-item>
  
  <el-form-item label="用户类型" prop="usertype">
    <el-radio-group v-model="zxc.usertype">
      <el-radio label="vip"></el-radio>
      <el-radio label="maomao"></el-radio>
    </el-radio-group>
   
    
  </el-form-item>
 
<div>
  <span slot="footer" class="dialog-footer">
       <el-button type="primary" @click="submitForm('zxc')">立即添加</el-button>
        <el-button type="primary" @click="$emit('update:add_btn', false)">关闭</el-button>
 </span>
</div>

</el-form>

</el-dialog>
</div>
      <!-- end -->
  </div>
</template>


<script>
export default {
  props: [ "ruleForm", "add","add_btn"],
  data() {
    return {
      zxc: {},
        rules: {
          	username: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
           hometel: [
            { required: true, message: '请输入地址', trigger: 'blur' },
             
          ],
           userid: [
            { required: true, message: '请输入工号', trigger: 'blur' },
           
          ],
           	mobile: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            
          ],
          ismanager: [
            { required: true, message: '请选择身份权限', trigger: 'change' }
          ],
          workstate: [
            { required: true, message: '请选择在职状态', trigger: 'change' }
          ],
          entrydate: [
            { type: 'date', required: true, message: '请选择入职时间', trigger: 'change' }
          ],
            usertype: [
            { required: true, message: '请选择用户类型', trigger: 'change' }
          ],

        }
      
    };
  },
  methods: {
    submitForm(formName) {
     this.$refs[formName].validate((valid) => {
          if (valid) {
           this.add(this.zxc);          
             alert('添加成功');
           this.$emit('update:add_btn', false)      
          } else {
           alert('请按规则填写!!');
            return false;
          }
        });
    },
    centerClose(){
      this.$emit('update:add_btn', false)
    }
  },
  created() {
    this.zxc = this.ruleForm;  
    console.log(this.ruleForm);
  }
};
</script>
<style scoped lang="scss">
.userInfo-wrapp {
  .user-table {
    margin-top: 15px;
  }
}
.fl {
  float: left;
}
.qc_ {
  clear: both;
}
.block {
  margin-left: 7%;
}
.fgh{
  display: none;
}
</style>
